<!--
// 
// Details.vue
// 客户后台
// 
// Created by 区区电脑 on 2024/08/28.
//
-->
<template>
    <div class="Details">
        <div class="infos">
            <el-descriptions :column="1">
                <template #title>
                    <span style="color: var(--el-color-primary);font-size: 18px"><b-icon name="bi-box-fill" /> {{ state.info.name }}</span>
                </template>
                <el-descriptions-item label="mac地址" width="300">{{ state.info.mac }}</el-descriptions-item>
                <el-descriptions-item label="算法类型">
                    <el-tag v-if="state.info.algorithmType===0" type="info">无</el-tag>
                    <el-tag v-if="state.info.algorithmType===1" effect="dark" type="primary">标准取样法</el-tag>
                    <el-tag v-if="state.info.algorithmType===2" effect="dark" type="warning">基本参数法</el-tag>
                    <el-tag v-if="state.info.algorithmType===3" effect="dark" type="success">标准取样法&基本参数法</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="授权类型" width="300">
                    <el-tag v-if="state.info.authorizationType===0" type="info">未授权</el-tag>
                    <el-tag v-if="state.info.authorizationType===1" effect="dark" type="success">永久授权</el-tag>
                    <el-tag v-if="state.info.authorizationType===2" effect="dark" type="warning">天数授权</el-tag>
                    <el-tag v-if="state.info.authorizationType===3" effect="dark" type="primary">截止时间授权</el-tag>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="tab-container">
            <el-tabs v-model="state.tableName">
                <el-tab-pane v-if="$hasPagePermission('ComputerProgram')" name="Program">
                    <template #label>
                        <span style="padding-left: 10px">主机程序</span>
                    </template>
                </el-tab-pane>
                <el-tab-pane v-if="$hasPagePermission('ComputerOperateLog')" name="OperateLog" label="主机操作记录"></el-tab-pane>
                <el-tab-pane v-if="$hasPagePermission('IPChange')" name="IPChange" label="IP地址变更记录"></el-tab-pane>
            </el-tabs>
            <div class="content">
                <Program v-if="state.tableName === 'Program'" />
                <OperateLog v-if="state.tableName === 'OperateLog'" />
                <IPChange v-if="state.tableName === 'IPChange'" />
            </div>
        </div>
        <EditForm ref="editForm" />
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, provide} from "vue";
import {useStore} from "vuex";
import {useRouter, useRoute} from "vue-router";
import * as api from "./api.js";
import EditForm from "./EditForm.vue"
import Program from "./Program/Index.vue"
import OperateLog from "./OperateLog/Index.vue"
import IPChange from "./IPChange/Index.vue"

const {$hasPagePermission} = window

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
const route = useRoute();
// store
const store = useStore();
const query = computed(() => route.query)
const state = reactive({
    info: {id: query.value.id},
    tableName: "Program",
    tableList: [
        {name: "主机程序", value: "Program"},
    ]
})

// 向子孙组件注入项目详情
provide("detailsInfo", computed(() => state.info))


// 修改项目
const editForm = ref()

function editData() {
    editForm.value.show({
        title: "修改项目",
        options: {...state.info},
        ok: () => {
            loadInfo();
        }
    })
}

/**
 * 查详情
 * @returns {Promise<void>}
 */
async function loadInfo() {
    const {data} = await api.GetOneComputer({id: query.value.id});
    state.info = data || {}
}

onMounted(() => {
    loadInfo()
})
</script>

<style lang="scss" scoped>
.Details {
    padding: 10px;

    .infos {
        background: #fff;
        padding: 10px 10px 0 10px;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        box-sizing: border-box;
        border: 1px solid var(--el-color-primary);
    }

    .tab-container {
        background: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 2px;
        margin-top: 10px;
        width: 100%;
        .column-tabs {
            width: 160px;
            height: 100%;
            box-sizing: border-box;
            border-right: 1px solid #e0e0e0;
            .column-tab {
                padding: 10px;
                font-size: 16px;
                color: #333;
                cursor: pointer;
                border-left: 2px solid #fff;
            }
            .active-tab {
                background: var(--el-color-primary-light-9);
                border-left: 2px solid var(--el-color-primary);
                color: var(--el-color-primary);
            }
        }
        .content {
            width: 100%;
            padding: 0 10px 10px 10px;
            box-sizing: border-box;
        }
    }
}
</style>